<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import qs from "qs";
import {useMessage} from "naive-ui";
import router from "@/router";
import {loadingBar} from "../HomeView_N.vue"

const message = useMessage();

const loginUser = ref(getUser());

// const setUser = ref({
//   nickname:'',
//   email:'',
//   birth:'',
//   gender:'',
//   description:'',
// });

onMounted(()=>{
  loginUser.value = getUser();
  console.log(loginUser.value);
  loadingBar.finish();
  // setUser.value = loginUser.value
  // setUser.value.birth = parseInt(Date.parse(loginUser.value.birth));
  // let data = qs.stringify(setUser.value.birth);
  // console.log(data);
  // loadOrder();
})

//huo



const setinfo = () => {
  let data = qs.stringify(loginUser.value);
  console.log(data);
  axios.post(BASE_URL+'/v1/user/update',data).then((response)=>{
    if(response.data.code==2000){
      message.success('修改成功!');
      setUser(response.data.data[0]);
      router.push('/user')
    }else{
      message.error(response.data.msg);
    }
  })
}

</script>

<template>
  <div style="position: absolute;width: 100%;height: 100%;top: 0;left: 0;opacity: 0.5">
    <img src="/background.webp">
  </div>
  <div ref="containerRef" style="width: 100%; padding: 20px 200px;box-sizing: border-box;">
    <!--左边导航栏-->
    <n-flex>
      <n-flex style="height: 80vh;width: 18%;border: 2px solid lightgray;">
        <n-card style="overflow: hidden;">
          <n-space vertical>
            今天你又点了几单呢
          </n-space>
          <n-card :bordered="false">
            <n-flex vertical>
              <router-link to="/user" style="text-decoration: none; color: var(--primary-color); transition: .3s var(--cubic-bezier-ease-in-out);">
                <n-button quaternary style="width: 100%;">
                  个人中心
                </n-button>
              </router-link>
              <router-link to="/message" style="text-decoration: none; color: var(--primary-color); transition: .3s var(--cubic-bezier-ease-in-out);">
                <n-button quaternary style="width: 100%;">
                  我的消息
                </n-button>
              </router-link>
              <router-link to="/order" style="text-decoration: none; color: var(--primary-color); transition: .3s var(--cubic-bezier-ease-in-out);">
                <n-button quaternary style="width: 100%;">
                  订单中心
                </n-button>
              </router-link>
            </n-flex>
          </n-card>
        </n-card>
      </n-flex>

      <n-flex style="width: 75%;height: 100%;">
        <n-card style="border: 2px solid lightgray;width: 100%;height: 80vh">
          <n-space vertical>
            <!-- 头像居中不会,先用div实现-->
            <div style="margin-left: 510px">
              <n-avatar
                  round
                  :size="80"
                  src="/messageAvatar/头像.jpg"
              />
            </div>
            <hr>
            <!--          <n-space vertical style="margin-left: 200px">-->
            <!--            <n-space :vertical="false"><n-card class="user_info1" content-style="padding: 0;">用户名:</n-card><n-input class="user_info" v-model:value="loginUser.username" type="text"  /></n-space>-->
            <!--            <n-space :vertical="false"><n-card class="user_info1" content-style="padding: 0;">昵称:</n-card><n-input class="user_info" v-model:value="loginUser.nickname" type="text"  /></n-space>-->
            <!--            <n-space :vertical="false"><n-card class="user_info1" content-style="padding: 0;">邮箱:</n-card><n-input class="user_info" v-model:value="loginUser.email" type="text"  /></n-space>-->
            <!--            <n-space :vertical="false"><n-card class="user_info1" content-style="padding: 0;">生日:</n-card><n-input class="user_info" v-model:value="loginUser.birth" type="text"  /></n-space>-->
            <!--            <n-space :vertical="false"><n-card class="user_info1" content-style="padding: 0;">性别:</n-card><n-input class="user_info" v-model:value="loginUser.gender" type="text"  /></n-space>-->
            <!--            <n-space :vertical="false"><n-card class="user_info1" content-style="padding: 0;">描述:</n-card><n-input class="user_info"  style="height: 80px" v-model:value="loginUser.description" type="text" /></n-space>-->
            <!--          </n-space>-->
            <n-form

                label-placement="left"
                label-width="auto"
                require-mark-placement="right-hanging"
                :style="{
               maxWidth: '640px',
               marginLeft: '340px'
              }"
            >
<!--              <n-form-item label="用户名:">-->
<!--                <n-input class="user_info" v-model:value="loginUser.username" type="text"  />-->
<!--              </n-form-item>-->
              <n-form-item label="昵称:">
                <n-input class="user_info" v-model:value="loginUser.nickname" type="text" />
              </n-form-item>
              <n-form-item label="邮箱:">
                <n-input class="user_info" v-model:value="loginUser.email" type="text"  />
              </n-form-item>
              <n-form-item label="生日:">
                <n-date-picker
                    class="user_info"
                    v-model:formatted-value="loginUser.birth"
                    value-format="yyyy-MM-dd"
                    type="date"
                />
              </n-form-item>

              <n-form-item label="性别:">
                <n-input class="user_info" v-model:value="loginUser.gender" type="text"  />
              </n-form-item>
              <n-form-item label="描述:">
                <n-input class="user_info" v-model:value="loginUser.description" type="text"  />
              </n-form-item>
            </n-form>
            <n-button type="primary" block secondary strong @click="setinfo" style="width: 90px;margin: 0 auto">
              保存设置
            </n-button>
          </n-space>
        </n-card>
      </n-flex>
    </n-flex>
  </div>
</template>

<style scoped>
.user_info {
  position: relative;
  left: 20px;
  height: 38px;
  width: 280px;
}

.user_info1 {
  margin-left: 15px;
  padding: 3px;
  height: 38px;
  width: 60px;
}




</style>